import React, { PureComponent } from 'react'
import {CSSTransition, TransitionGroup} from 'react-transition-group'
import  './style.css'
export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      books: [
        { id: 1,name: '你不知道的js', price: 99},
        { id: 2,name: 'JS高级程序设计', price: 499},
        { id: 3,name: 'Vuejs', price: 79}
      ]
    }
  }
  addBook() {
    const books = [...this.state.books]
    books.push({id:new Date().getTime(),name: 'React高级设计', price:88})
    this.setState({books})
  }
  deleteBook(index) {
    const books = [...this.state.books]
    books.splice(index, 1)
    this.setState({books})
  }
  render() {
    const {books} = this.state
    return (
      <>
        <TransitionGroup component='ul'>
          
          {books.map((item,index) => {
            return (
                <CSSTransition timeout={1000} key={item.id} classNames='item'>
                  <li>{item.name}-价格：{item.price } <button onClick={e => this.deleteBook(index)}>删除</button></li>
                </CSSTransition>
            )
          })}

        </TransitionGroup>
        
        <button onClick={e => this.addBook()}>新增书籍</button>
      </>
    )
  }
}

export default App